<template>
	<!--wwl  精算单 -->
	<page  ref='page'>
		<view class="page">
			<view class="tabber_box">
				<view class="tabber_box_static" :style="{ height: `${getters.statusBarHeight}px` }"></view>
				<view class="tabber_box_flex" :style="{ height: `${getters.statusBarHeight}px` }"></view>
			</view>
			<view class="tabber_box_title_static">
			</view>
			<view class="tabber_box_title_flex" :style="{ top: `${getters.statusBarHeight}px` }">
				
				<view class="title">
					精算单
				</view>
			</view>
			
			<view class="shangbeijin">
				
			</view>
			
			<view class="ding" >
				<view class="roff" >
					<view class="top1">
						
						<view class="shang">
							装修精算单
						</view>
						<view class="xia">
							图装将为您全程提供品质保障！
						</view>
					</view>
					<view class="zhong1">
						<view class="shang">
							请选择您要购置的装修材料及服务
						</view>
						<view class="xia">							我们将为您提供精准的报价供您参考！
						</view>
					</view>
					<view class="bottom1">
						<view class="shang" v-if='shopLength == 0'>
							您还未选择服务
						</view>
						<view class="xia" v-if='shopLength== 0' @click="onAddRow(list[0])">
							去选择
						</view>
						<view class="left" v-if='shopLength > 0'  @click="onAllSelect()">
							<n-icon class="icon" v-if='isAllSelect' name="roundcheckfill" size="30" color="#FE7A1F"></n-icon>
							<n-icon class="icon" name="round" size="30" color="#BBBBBB" v-else></n-icon>
							<text class="left_text">
								全选
							</text>
						</view>
						<view class="right" v-if='shopLength > 0'>
							<view class="right_left">
								<view class="right_num">
									共{{selecIdtList.length}}件
								</view>
								<view class="right_money">
									<text>共计：</text>
									<text>¥ {{payable}}</text>
								</view>
							</view>
							<button class="right_btn" :loading='saveLoading' @click="onSave()">结算</button>
						</view>
					</view>
				</view>
			</view>
			
			
			<view class="list" v-if='list && list.length > 0 '>
					<view class="row" v-for='(row,i) in list' :key='i'>
						<view class="title_type" @click="onAddRow(row)">
							<view class="left">
								<!-- <image :src="row.icon" mode="scaleToFill"></image> -->
								<text class="text">{{row.title}}</text>
							</view>
							<view class="right">
								<text class="text" v-if='!row.list || row.list && row.list.length == 0'>请选择服务</text>
								<text class="text" v-else>查看更多</text>
								<n-icon name="right" size="32" color="#a0a0a0"></n-icon>
							</view>
						</view>
						<view v-if='row.list && row.list.length > 0'>
							<block v-if='row.id != 11 && row.id != 12'>
								<view class="content_list" v-for='(shop,shopI) in row.list' :key='shopI'>
									<view class="content_list_shop" v-if='row.id != 11'>
										<view class="left"  @click="onSelect('shop', row.id+'_'+ shop.user.id , i +'_' + shopI)">
											<n-icon class="icon" v-if='selecShoptList.indexOf(row.id+"_"+shop.user.id ) != -1'
												name="roundcheckfill" size="30" color="#FE7A1F"></n-icon>
											<n-icon class="icon" name="round" size="30" color="#BBBBBB" v-else></n-icon>
										</view>
										<view class="right">
											<image :src="shop.user.avatar" mode="scaleToFill"></image>
											<text>{{shop.user.name}}</text>
										</view>
									</view>
									<delSlideLeft v-for='(commodity,commodityI) in shop.list' :key='commodityI'
										:item="commodity"
										:data_transit="{index:i+'_' + shopI+'_'+commodityI,item:commodity,id:row.id+'_'+shop.user.id + '_' + commodity.id}"
										@delItem="onDelete">
										<view class="content_list_commodity">
											<view class="delete" v-if='commodity.deleted_at != null' >
												<view class="delete2">已删除</view>
												<p class="delete3">已删除的商品将默认清除出精算单，下次打开精算单该商品就已被清除</p>
											</view>
											<view class="left" 
												@click="onSelect('commodity',row.id+'_'+shop.user.id + '_' + commodity.id,i+'_' + shopI+'_'+commodityI)">
												<n-icon class="icon"
													v-if='selecIdtList.indexOf(row.id+"_"+shop.user.id + "_" + commodity.id) != -1'
													name="roundcheckfill" size="30" color="#FE7A1F"></n-icon>
												<n-icon class="icon" v-else name="round" size="30" color="#BBBBBB"></n-icon>
											</view>
											<view class="right">
												<view class="right_left">
													<image :src="commodity.image" mode="scaleToFill"></image>
												</view>
												<view class="right_right">
													<view class="right_right_name">
														<view class="right_right_top_left">
															
															<view class="money">
																{{commodity.name}}
															</view>
															<view class="right_right_label" v-if="commodity.goods_sku">
																{{commodity.goods_sku}}
															</view>
														</view>
														<view class="right_right_top_right">
															<view class="money">
																销量 {{commodity.sale_num}}
															</view>
															<view class="num">
																 <!-- x{{commodity.count}} -->
															</view>
														</view>
													</view>
													<!-- <view class="right_right_label">
														<text>{{commodity.goods_sku}}</text>
													</view> -->
													<view class="right_right_money_box">
														<view class="right_right_top_left">
															¥ {{commodity.amount}}
														</view>
														<view class="right_right_top_right">
															<view class="num">
																x{{commodity.count}}
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</delSlideLeft>
								</view>
							</block>
							<view class="content_list" v-else>
								<delSlideLeft v-for='(commodity,commodityI) in row.list' :key='commodityI' :item="commodity" @delItem="onDelete"
										:data_transit="{index:i+'_' +commodityI,item:commodity,id:row.id+ '_' + commodity.id}" >
									<view class="content_list_commodity"
										:class="commodityI== 0 ? 'content_list_commodity2' : ''" >
										<view class="left"
											@click="onSelect('shop',row.id+ '_' + commodity.id,i+'_'+commodityI,true)">
											<n-icon class="icon" v-if='selecIdtList.indexOf(row.id+ "_" + commodity.id) != -1'
												name="roundcheckfill" size="30" color="#FE7A1F"></n-icon>
											<n-icon class="icon" v-else name="round" size="30" color="#BBBBBB"></n-icon>
										</view>
										<view class="right">
											<view class="right_left">
												<image :src="commodity.image" mode="scaleToFill"></image>
											</view>
											<view class="right_right">
												<view class="right_right_name">
													<view class="right_right_top_left">
														
														<view class="money">
															{{commodity.name}}
														</view>
														<view class="right_right_label" v-if="commodity.goods_sku">
															{{commodity.goods_sku}}
														</view>
													</view>
													<view class="right_right_top_right">
														<view class="money">
															销量 {{commodity.sale_num}}
														</view>
														<view class="num">
															 <!-- x{{commodity.count}} -->
														</view>
													</view>
												</view>
												<!-- <view class="right_right_label">
													<text>{{commodity.goods_sku}}</text>
												</view> -->
												<view class="right_right_money_box">
													<view class="right_right_top_left">
														¥ {{commodity.amount}}
													</view>
													<view class="right_right_top_right">
														<view class="num">
															x{{commodity.count}}
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</delSlideLeft>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="bottom_box" v-if='shopLength > 0'>
					<view class="left" @click="onAllSelect()">
						<n-icon class="icon" v-if='isAllSelect' name="roundcheckfill" size="30" color="#FE7A1F"></n-icon>
						<n-icon class="icon" name="round" size="30" color="#BBBBBB" v-else></n-icon>
						<text class="left_text">
							全选
						</text>
					</view>
					<view class="right">
						<view class="right_left">
							<view class="right_num">
								共{{selecIdtList.length}}件
							</view>
							<view class="right_money">
								<text>共计：</text>
								<text>¥ {{payable}}</text>
							</view>
						</view>
						<button class="right_btn" :loading='saveLoading' @click="onSave()">结算</button>
					</view>
				</view> -->
				
			<!-- <tabbar ref='tabbar' active='2'/> -->
		</view>
		
	</page>
</template>

<script>
	import {
		getShopCart,setdeleteCart
	} from "../static/api.js"
	import delSlideLeft from '@/components/ay-operate/del_slideLeft.vue'
	import tabbar from '@/components/tabbar.vue'
	export default {
		components: {
			delSlideLeft,tabbar
		},
		data() {
			return {
				list: [],
				loading: false,
				selecShoptList: [],
				shopLength: 0,
				selecIdtList: [],
				selectMoneyList: [],
				isAllSelect: false,
				saveLoading: false,

			}
		},
		computed: {
			payable() {
				let c = 0
				this.selectMoneyList.forEach(x => {
					c = this.$global.formatFloat(c, x, 1)
				})
				return c
			}
		},
		watch: {
			selecShoptList(x) {
				this.isAllSelect = this.selecShoptList.length == this.shopLength
			}
		},
		methods: {
			onAddRow(row) {
				if (row.id == 1) {
					uni.navigateTo({
						url: `/pagesCommodity/findDesign/index?source=1`
					})
				} else if (row.id == 2) {
					uni.navigateTo({
						url: `/pagesCommodity/findCraftsman/index?source=1`
					})
				} else if (row.id == 11) {
					uni.showToast({
						title: '暂未开通',
						icon: 'none'
					})
				}else if (row.id == 12) {
					uni.navigateTo({
						url: `/pagesHome/information?type=thirdPartySupervision&source=1`
					})
				} else {
					uni.navigateTo({
						url: `/pagesCommodity/classification?type=${Number(row.id) - 2 }&typeName=${encodeURIComponent(row.title)}&source=1&jiacan=1`
					})
				}
			},
			onSave() {
				if (this.selecIdtList.length == 0) return uni.showToast({
					title: '您好没有选择商品',
					icon: 'none'
				})
				
				
				console.log(this.selecIdtList,info)
				var info = this.selecIdtList.map(c => c.split('_')[c.split('_').length-1]).join(',')
				//店铺ID
				var shopinfo = this.selecIdtList.map(c => c.split('_')[c.split('_').length-2]).join(',')
				var shopid = shopinfo.split(',');
				var shoplengths = shopid.length;
				console.log(shopid)
				if(shopid.length > 1){
					uni.showToast({
						title: '暂不支持跨店铺联合支付',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: `/pagesMy/order/confirmOrder?type=actuarialSheet&info=${info}&shoplength=${shoplengths}`
				})
			},
			async onDelete(e) {
				uni.showLoading({mask:true})
				try{
					var res = await setdeleteCart({id:e.item.id})
					var ids = e.data.id.split('_')
					var is = e.data.index.split('_')
					if(ids.length == 2){
						let shopId = this.selecShoptList.indexOf(ids[0] + '_' + ids[1])
						if(shopId != -1){
							this.selecShoptList.splice(shopId,1)
							let ic = this.selecIdtList.indexOf(ids[0] + '_' + ids[1])
							 this.selecIdtList.splice(ic,1)
							 this.selectMoneyList.splice(ic, 1)
						}
						this.list[is[0]].list.splice(is[1],1) 
					}else{
						let ic = this.selecIdtList.indexOf(ids[0] + '_' + ids[1] + '_' + ids[2])
						let shopId = this.selecShoptList.indexOf(ids[0] + '_' + ids[1])
						if(ic != -1){
							this.selecIdtList.splice(ic,1)
							this.selectMoneyList.splice(ic, 1)
							let shopId = this.selecShoptList.indexOf(ids[0] + '_' + ids[1])
							if(shopId != -1){
								this.selecShoptList.splice(shopId,1)
							}
						}
						this.list[is[0]].list[is[1]].list.length == 1 ? this.list[is[0]].list.splice(is[1],1) : this.list[is[0]].list[is[1]].list.splice(is[2],1)
					}
					this.$forceUpdate()
					uni.hideLoading()
				}catch{
					uni.hideLoading()
				}
				
			},
			onAllSelect() {
				this.isAllSelect = !this.isAllSelect
				if (!this.isAllSelect) {
					this.selecIdtList = []
					this.selectMoneyList = []
					this.selecShoptList = []
					return
				}
				this.list.forEach((row, i) => {
					if (row.list && row.list.length > 0) {
						row.list.forEach((shop, shopI) => {
							let shopF = row.id == 11 ? this.selecShoptList.indexOf(row.id + '_' + shop
								.id) : this.selecShoptList.indexOf(row.id + '_' + shop.user.id)
							if (shopF == -1) {
								row.id == 11 ? this.onSelect('shop', row.id + '_' + shop.id, i + '_' +
									shopI, true) : this.onSelect('shop', row.id + '_' + shop.user.id,
									i + '_' + shopI)
							}
						})
					}
				})
			},
			onSelect(type, id, i, status) {
				var ids = id.split('_')
				var is = i.split('_')
				var flag = this.selecIdtList.indexOf(id)
				if (type == 'shop') {
					var existence = this.selecShoptList.indexOf(ids[0] + '_' + ids[1])
					if (existence != -1) {
						this.selecShoptList.splice(existence, 1)
						if (status) {
							let idIndex = this.selecIdtList.indexOf(ids[0] + '_' + ids[1])
							this.selecIdtList.splice(idIndex, 1)
							this.selectMoneyList.splice(idIndex, 1)
						} else {
							this.list[is[0]].list[is[1]].list.forEach(c => {
								let ic = this.selecIdtList.indexOf(ids[0] + '_' + ids[1] + '_' + c.id)
								if (ic != -1) {
									this.selecIdtList.splice(ic, 1)
									this.selectMoneyList.splice(ic, 1)
								}
							})
						}

					} else {
						this.selecShoptList.push(id)
						if (status) {
							this.selecIdtList.push(ids[0] + '_' + ids[1])
							this.selectMoneyList.push(this.list[is[0]].list[is[1]].amount)
						} else {
							this.list[is[0]].list[is[1]].list.forEach(c => {
								let ic = this.selecIdtList.indexOf(ids[0] + '_' + ids[1] + '_' + c.id)
								if (ic == -1) {
									this.selecIdtList.push(ids[0] + '_' + ids[1] + '_' + c.id)
									this.selectMoneyList.push(c.amount)
								}
							})
						}

					}
				} else {
					if (flag == -1) {
						this.selecIdtList.push(id)
						this.selectMoneyList.push(this.list[is[0]].list[is[1]].list[is[2]].amount)
						var index = 0
						this.list[is[0]].list[is[1]].list.forEach(c => {
							if (this.selecIdtList.indexOf(ids[0] + '_' + ids[1] + '_' + c.id) != -1) index++
						})
						if (index == this.list[is[0]].list[is[1]].list.length) {
							this.selecShoptList.push(ids[0] + '_' + ids[1])
						}
					} else {
						this.selecIdtList.splice(flag, 1)
						this.selectMoneyList.splice(flag, 1)
						var index2 = this.selecShoptList.indexOf(ids[0] + '_' + ids[1])
						if (index2 != -1) this.selecShoptList.splice(index2, 1)
					}
				}
				// console.log(this.selecIdtList, '商品')
				// console.log(this.selectMoneyList, 'momey')
				// console.log(this.selecShoptList, 'shop')
			},
			async getList() {
				uni.showLoading()
				try {
					var res = await getShopCart()
					// this.list = res.slice(0,res.length)
					console.log(res,'温柔1');
					this.list = res;
					console.log(this.list,'温柔2');
					var shopLength = 0
					this.list.forEach(c => {
						if (c.list && c.list.length > 0) {
							shopLength = c.list.map(v => v.list && v.list.length > 0).length + shopLength
							c.list.forEach(b => {
								if (b.list && b.list.length > 0) {
									b.list.forEach(n => {
										n.count2 = n.count
									})
								}
							})
						}

					})
					
					this.shopLength = shopLength;
					var temporaryList = this.list.slice(0,13);
					console.log(this.shopLength,'爱的色放');
					temporaryList.reverse();
					this.list.splice(0,11,temporaryList);
					this.list = this.list.flat();
					console.log(this.list,'-------------------------------',temporaryList);
					// this.list.map(c=>c.list && c.list.length > 0).length
					uni.hideLoading()
				} catch {
					uni.hideLoading()
				}

			}
		},
		onLoad() {
			
			if (!this.$store.state.userInfo) {
				console.log(this.$store.state.userInfo,'登录');
				uni.showToast({
					title: '当前未登录，无法查看精算单',
					duration: 2000,
					icon:'none'
				});
			} else {
				console.log('未登录');
				this.$global.$editUploadBack(2, 'actuarialSheet');
				this.getList()
			}
		},
		onShow(){
			if (!this.$store.state.userInfo) {
				console.log(this.$store.state.userInfo,'登录');
				uni.showToast({
					title: '当前未登录，无法查看精算单',
					duration: 2000,
					icon:'none'
				});
			} else {
				console.log('未登录');
				if (this.$global.$editUploadBack(3, 'actuarialSheet')) {
					this.getList()
				}
			}
			
			
		},
	}
</script>

<style lang="scss" scoped>
	.tabber{
		transition: all 0.8s;
	}
	.tabber1{
		opacity: 0;
	}
	.tabber_box .tabber_box_flex {
		width: 100%;
		// background-color: #fff;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
	}
	.tabber_box_title_flex {
		// background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 99999;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 42rpx;
		text-align: center;
		color: #000;
		font-weight: 700;
		// .left {
		// 	position: absolute;
		// 	left: 40rpx;
		// 	top: 50%;
		// 	transform: translateY(-50%);
		// }
	}
	
	.delete{
		position: absolute;
		    z-index: 9;
		    background: #0000007d;
		    width: 100%;
		    height: 100%;
		    text-align: center;
		    font-size: 20px;
	}
	.delete2{
		border-radius: 50%;
		    width: 30%;
		    height: 70%;
		    position: absolute;
		    top: 10%;
		    left: 34%;
		    background: #fff;
		    text-align: center;
		    line-height: 92px;
	}
	.delete3{
		font-size: 14px;
		    position: absolute;
		    background: #ffaeae;
		    bottom: 8%;
		    width: 97%;
		    word-break: break-all;
			white-space: initial;
	}
	
	.page {
		padding-bottom: 10rpx;
	}

	.list {
		// margin-top: 40px;
		padding: 40rpx 36rpx;
		width: 100%;
		box-sizing: border-box;

		.row {
			width: 100%;
			border-radius: 8rpx;
			box-shadow: 0px 4px 10px 1px #b39c5e96;
			overflow: hidden;
			margin-bottom: 40rpx;

			.title_type {
				padding: 30rpx 22rpx;
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				// color: #fff;
				// background: #666666;

				.left {
					width: calc(100% - 260rpx);
					display: flex;
					justify-content: space-between;

					.text {
						width: calc(100% - 60rpx);
						font-size: 32rpx;
						line-height: 44rpx;
					}

					image {
						height: 44rpx;
						width: 44rpx;
						margin-right: 20rpx;
					}

				}
				
				.right{
					color:#a0a0a0;
				}
			}

			.content_list {
				padding-right: 20rpx;
				width: 100%;
				box-sizing: border-box;
				background-color: #fff;

				.content_list_shop {
					padding: 0rpx 0;
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						display: flex;
						justify-content: center;
						width: 54rpx;
						align-items: center;
					}

					.right {
						width: calc(100% - 54rpx);
						display: flex;
						justify-content: space-between;
						align-items: center;

						image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
						}

						text {
							width: calc(100% - 78rpx);
							font-size: 28rpx;
							line-height: 40rpx;
							color: #26252A;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;

						}
					}
				}

				.content_list_commodity2 {
					padding-top: 40rpx;
				}

				.content_list_commodity {
					margin-bottom: 40rpx;
					display: flex;
					justify-content: space-between;

					.left {
						width: 54rpx;
						display: flex;
						justify-content: center;
						width: 54rpx;

						.icon {
							margin-top: 40rpx;
						}
					}

					.right {
						width: calc(100% - 54rpx);
						display: flex;
						justify-content: space-between;

						.right_left {
							image {
								width: 128rpx;
								height: 128rpx;
							}
						}

						.right_right {
							width: calc(100% - 142rpx);

							.right_right_name {
								display: flex;
								justify-content: space-between;

								.right_right_top_left {
									width: calc(100% - 158rpx);
									font-size: 24rpx;
									line-height: 34rpx;
									color: #26252A;
									height: 64rpx;
									overflow: hidden;
									text-overflow: ellispsis;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
								}

								.right_right_top_right {
									width: 140rpx;
									text-align: right;
									// display: flex;
									// flex-direction: column;
									// justify-content: flex-end;

									.money {
										font-size: 24rpx;
										line-height: 40rpx;
										color: #5f5f5f;
										margin-bottom: 10rpx;
										// font-weight: 700;
									}

									.num {
										color: #666666;
										font-size: 24rpx;
										line-height: 34rpx;
									}
								}
							}
						}

						.right_right_label {
							// margin-top: 16rpx;
							width: calc(100% - 0px);
							height: 48rpx;
							background: #f6f7fb;
							font-size: 20rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							color: #ADADAD;
							// line-height: 48rpx;
							// padding: 0 24rpx;
							box-sizing: border-box;
						}

						.right_right_money_box {
							margin-top: 14rpx;
							color: #FF2F2F;
							font-size: 28rpx;
							line-height: 40rpx;
							display: flex;
							
							.right_right_top_left {
								width: calc(100% - 158rpx);
								line-height: 34rpx;
								height: 64rpx;
								overflow: hidden;
								text-overflow: ellispsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}
							
							.right_right_top_right {
								width: 140rpx;
								text-align: right;
							
								
							
								.num {
									color: #666666;
									font-size: 24rpx;
									line-height: 34rpx;
								}
							}
						}

						.right_right_money_num {
							margin-top: 14rpx;
							display: flex;
							justify-content: space-between;

							.right_right_money {
								width: calc(100% - 200rpx);
								color: #FF2F2F;
								font-size: 28rpx;
								line-height: 40rpx;
							}

							.right_right_num {
								display: flex;
								align-items: center;
								justify-content: flex-end;

								.text {
									text-align: center;
									display: inline-block;
									width: 32rpx;
									height: 32rpx;
									background: #fff;
									// border-radius: 4rpx;
									line-height: 32rpx;
									color: #999999;
									font-size: 20rpx;
									border: 2rpx solid #d5d5d5;
								}

								.text2 {
									border-top: 2rpx solid #d5d5d5;
									border-bottom: 2rpx solid #d5d5d5;
									text-align: center;
									width: 56rpx;
									height: 32rpx;
									line-height: 32rpx;
									background: #f6f7fb;
									// border-radius: 4rpx;
									color: #888;
									font-size: 20rpx;
									// margin: 0 4rpx;
								}
							}
						}
					}
				}
			}
		}
	}

	.bottom_box {
		position: fixed;
		z-index: 99;
		bottom: 0;
		width: 750rpx;
		background-color: #fff;
		padding: 30rpx 36rpx 42rpx 38rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #26252A;

		.left {
			line-height: 40rpx;

			.left_text {
				margin-left: 8rpx;
			}
		}

		.right {
			width: calc(100% - 116rpx);
			display: flex;
			justify-content: space-between;
			align-items: center;

			.right_left {
				width: calc(100% - 200rpx);
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-end;

				.right_num {
					color: #ADADAD;
				}

				.right_money {
					margin-left: 28rpx;

					>text:nth-child(2) {
						color: $theme;
					}
				}
			}

			.right_btn {
				width: 160rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: $theme;
				color: #fff;
				font-size: 28rpx;
				border-radius: 30rpx;
			}
		}
	}

	button[loading]::before {
		align-self: center
	}

	button {
		display: flex;
		justify-content: center;
		align-item: center;
		padding: 0;
	}

	button::after {
		border: none;
	}
	
	
	
	.ding{
		margin-top: 40px;
		    padding: 20px 18px 0px 18px;
		    width: 100%;
			height: 162px;
		position: relative;
		z-index: 9;
		box-sizing: border-box;
		.roff{
			border-radius: 4px;
			box-shadow: 0px 2px 1px 0px #ff9b0496;
			padding: 2px 0px;
			background: #fff;
			position: fixed;
			width: calc(100% - 72rpx);
			    box-sizing: border-box;
			
			.top1{
				margin: 10px 10px;
				.shang{
					display: inline-block;
					    font-size: 16px;
					    font-weight: 600;
				}
				.xia{
					display: inline-block;
					    text-align: right;
					    font-size: 14px;
					    color: #ff9b04;
					    width: 73%;
				}
			}
			.zhong1{
				margin: 10px 10px;
				    background: #f5f5f5;
				    border-radius: 4px;
				    padding: 6px 20px;
				    font-size: 14px;
				.shang{
					
				}
				.xia{
					
				}
			}
			.bottom1{
				margin: 10px 10px;
				font-size: 14px;
				display: flex;
				.shang{
					display: inline-block;
					color: #a0a0a0;
					// flex: 0 0 60%;
					width: calc(100% - 140rpx);
				}
				.xia{
					display: inline-block;
					justify-content: flex-end;
					    background: #666;
					    background-image: linear-gradient(#fcb74e, #ff9b03);
					    padding: 3px 7px;
					    color: #fff;
					    border-radius: 61px;
						box-shadow: 0px 2px 3px 0px #ff9e0c;
				}
				
				
				.left {
					line-height: 40rpx;
					display: flex;
				    flex-wrap: wrap;
				    justify-content: center;
				    align-items: center;
					.left_text {
						margin-left: 8rpx;
					}
				}
				
				.right {
					width: calc(100% - 116rpx);
					display: flex;
					justify-content: space-between;
					align-items: center;
				
					.right_left {
						width: calc(100% - 200rpx);
						display: flex;
						flex-wrap: wrap;
						justify-content: flex-end;
				
						.right_num {
							color: #ADADAD;
						}
				
						.right_money {
							margin-left: 28rpx;
				
							>text:nth-child(2) {
								color: $theme;
							}
						}
					}
				
					.right_btn {
						width: 160rpx;
						height: 60rpx;
						line-height: 60rpx;
						background: $theme;
						color: #fff;
						font-size: 28rpx;
						border-radius: 30rpx;
					}
				}
			}
		}
		
		
	}
	
	.shangbeijin{
		background-image: linear-gradient(#fcb74e, #ff9b03);
		    width: 100%;
		    height: 176px;
		    position: fixed;
		    top: 0;
		    z-index: 6;
	}
</style>
